<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>angularjs初次使用</title>
	<link rel="stylesheet" href="libs/css/bootstrap.css">
</head>
<style>
	/*
	解决表达式闪烁：
	方案一：
	[ng-cloak]{
		display:none;
	}
	方案二：
	ng-bind="变量"
	*/
	[ng-cloak]{
		display:none;
	}
</style>
<body ng-app='app'>
	<div class="container" ng-controller="demoCtrl">
		<div  class="well">
			<ul>
				<li ng-cloak>{{name}}</li>
				<li ng-cloak>{{age}}</li>
				<li ng-cloak>{{address}}</li>
				<li ng-bind="job"></li>
				<li ng-hide="true">我是一个隐藏的元素</li>
				<li>
					<input type="text" ng-value="name">
				</li>
				<li ng-style="{border:'1px solid red'}">
					
				</li>
				<li>
					<input type="text" ng-readonly="1==2" ng-value="name">
				</li>

				<li>
					<select name="" id="">
						<option value=""  ng-selected="false">java</option>
						<option value=""  ng-selected="false">js</option>
						<option value=""  ng-selected="true">php</option>
					</select>
				</li>

				<li ng-bind-html="htmlstr">
					
				</li>
				
			</ul>
		</div>
		<div class="well" id="userList">
			<ul>
				<li ng-repeat="item in userList track by $index">
					{{$index}}-{{item.name}}-{{item.motto|limitTo:2:1}}
				</li>
			</ul>
		</div>
		<div class="well">
			<input type="text" ng-model="val">
			<button ng-click="val = (val - 0) + 1">自增</button>
		</div>

	</div>
</body>

<!-- <script src="libs/js/angular-1.2.30.js"></script> -->
<script src="libs/js/angular-1.6.9.min.js"></script>
<script src="libs/angular-1.6.9/angular-sanitize.min.js"></script>
<script>
	// console.log(angular.version);
	var app=angular.module('app',['ngSanitize']);

	app.animation('.userList', ['$animateCss', function($animateCss) {
	return {
		enter: function(element, doneFn) {
		var height = element[0].offsetHeight;
		return $animateCss(element, {
			addClass: 'red large-text pulse-twice',
			easing: 'ease-out',
			from: { height:'0px' },
			to: { height:height + 'px' },
			duration: 1 // one second
		});
		}
	}
	}]);


	app.controller("demoCtrl",['$scope',function($scope){
		$scope.name="bruce";
		$scope.age=10;
		$scope.address="中国西安";
		$scope.job="互联网爱好者";

		$scope.htmlstr=`<div>我是一个段落标签</div>`;

		$scope.userList=[
			{
				name:'jack ma',
				age:50,
				address:'中国杭州',
				company:'阿里巴巴',
				motto:'这辈子最不应该做的事就是创建阿里巴巴'
			},
			{
				name:'robin li',
				age:50,
				address:'中国北京',
				company:'百度信息',
				motto:'科技改变命运'
			},
			{
				name:'pony ma',
				age:46,
				address:'中国深圳',
				company:'腾讯科技',
				motto:'微信是一种生活方式'
			}
		];
	}]);


	//自定义过滤器
	app.filter('diyLimit',function(input){
		return input;
	});

	// function demoCtrl($scope){
	// 	$scope.name="bruce";
	// 	$scope.age=10;
	// 	$scope.address="中国西安";
	// 	$scope.job="互联网爱好者";
	// }
</script>
</html>